<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兰皓 - Java开发工程师</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="resume-container">
        <!-- 左侧个人信息栏 -->
        <aside class="sidebar">
            <div class="profile-card">
                <div class="profile-img-container">
                    <img src="profile.jpg" alt="兰皓" class="profile-img">
                    <div class="online-status"></div>
                </div>
                <h1>兰皓</h1>
                <p class="job-title">Java开发工程师</p>
                
                <div class="contact-info">
                    <h3><i class="fas fa-id-card"></i> 联系方式</h3>
                    <ul>
                        <li><i class="fas fa-phone"></i> 130-9135-4128</li>
                        <li><i class="fas fa-envelope"></i> 2681066350@qq.com</li>
                        <li><i class="fas fa-map-marker-alt"></i> 海南海口</li>
                        <li><i class="fab fa-github"></i> gitee.com/hlks</li>
                    </ul>
                </div>
                
                <div class="skills">
                    <h3><i class="fas fa-code"></i> 技术栈</h3>
                    <div class="skill-item">
                        <p>Java/Spring Boot</p>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 90%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <p>MySQL/Oracle</p>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 85%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <p>HTML/CSS/JS</p>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 80%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <p>Python/Django</p>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 75%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <p>Linux/Git</p>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 85%"></div>
                        </div>
                    </div>
                </div>
                
                <div class="hobbies">
                    <h3><i class="fas fa-heart"></i> 兴趣爱好</h3>
                    <div class="hobby-tags">
                        <span>编程</span>
                        <span>开源项目</span>
                        <span>技术博客</span>
                        <span>篮球</span>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 右侧主要内容区 -->
        <main class="main-content">
            <section class="section">
                <h2><i class="fas fa-user-graduate"></i> 教育背景</h2>
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-date">2023 - 2026</div>
                        <div class="timeline-content">
                            <h3>海南经贸职业技术学院</h3>
                            <p class="subtitle">软件技术专业 | 大专</p>
                            <p>主修课程: Java编程、数据库原理、Web开发、数据结构与算法、软件工程、计算机网络</p>
                            <p>GPA: 3.8/4.0 (专业前5%)</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section">
                <h2><i class="fas fa-briefcase"></i> 项目经验</h2>
                <div class="projects">
                    <div class="project-card">
                        <div class="project-header">
                            <h3>信息管理系统</h3>
                            <span class="project-date">2022.03 - 2022.06</span>
                        </div>
                        <div class="project-tech">
                            <span>Java</span>
                            <span>Spring Boot</span>
                            <span>MySQL</span>
                            <span>Vue.js</span>
                        </div>
                        <div class="project-details">
                            <p>基于Spring Boot框架开发的全栈式校园信息管理系统，集成学生信息管理、成绩分析、考勤统计等功能模块。</p>
                            <ul>
                                <li>✅ 学生信息CRUD操作（支持Excel批量导入导出</li>
                                <li>✅ 可视化成绩分析（Echarts图表展示）</li>
                                <li>✅ 人脸识别考勤系统（对接百度AI接口）</li>
                                <li>✅ 消息通知模块（WebSocket实时推送）</li>
                            </ul>
                        </div>
                        <a href="https://gitee.com/hlks/dianjing" class="project-link" target="_blank">
                            <i class="fab fa-github"></i> 查看项目
                        </a>
                    </div>

                    <div class="project-card">
                        <div class="project-header">
                            <h3>5725宿舍网站</h3>
                            <span class="project-date">2021.09 - 2021.12</span>
                        </div>
                        <div class="project-tech">
                            <span>Python</span>
                            <span>Django</span>
                            <span>SQLite</span>
                            <span>Bootstrap</span>
                        </div>
                        <div class="project-details">
                            <p>一个宿舍网站。</p>
                            <ul>
                                <li>实现了基于Django REST Framework的API接口</li>
                                <li>使用Django ORM设计数据库模型</li>
                                <li>集成Markdown编辑器支持代码高亮</li>
                                <li>部署在阿里云服务器上，使用Nginx+Gunicorn</li>
                            </ul>
                        </div>
                        <a href="https://gitee.com/S-at/5725" class="project-link" target="_blank">
                            <i class="fab fa-github"></i> 查看项目
                        </a>
                    </div>
                </div>
            </section>

            <section class="section">
                <h2><i class="fas fa-trophy"></i> 获奖情况？？？</h2>
                <div class="awards">
                    <div class="award-item">
                        <div class="award-icon">
                            <i class="fas fa-medal gold"></i>
                        </div>
                        <div class="award-content">
                            <h3>校级编程大赛一等奖（并非）</h3>
                            <p class="award-date">2022年</p>
                            <p>在全校编程大赛中，凭借"智能排课系统"项目获得一等奖，展示了优秀的算法设计和编码能力。</p>
                        </div>
                    </div>
                    <div class="award-item">
                        <div class="award-icon">
                            <i class="fas fa-medal silver"></i>
                        </div>
                        <div class="award-content">
                            <h3>国家励志奖学金（并非）</h3>
                            <p class="award-date">2021年</p>
                            <p>因学习成绩优异，综合素质突出，获得国家励志奖学金。</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section">
                <h2><i class="fas fa-user-edit"></i> 自我评价</h2>
                <div class="self-assessment">
                    <p>热爱编程，对技术充满热情，具备扎实的Java开发基础和良好的编码习惯。熟悉常见开发框架和工具，能够独立完成中小型项目的开发。</p>
                    <p>有较强的学习能力和问题解决能力，能够快速掌握新技术。积极参与开源社区，在GitHub上贡献代码。</p>
                    <p>良好的团队合作精神和沟通能力，能够适应快节奏的开发环境。注重代码质量和性能优化，追求编写优雅高效的代码。</p>
                </div>
            </section>
        </main>
    </div>

        <!-- 在footer前添加这个div -->
    <div class="resume-scraper">
        <h3><i class="fas fa-spider"></i> 简历信息替换工具</h3>
        <div class="scraper-form">
            <input type="url" id="targetResumeUrl" placeholder="输入要爬取的简历URL">
            <button id="scrapeAndReplaceBtn">获取并替换信息</button>
        </div>
        <div id="scraperStatus"></div>
    </div>

    <style>
        .resume-scraper {
            margin: 30px auto;
            padding: 20px;
            max-width: 800px;
            border: 1px solid #eee;
            border-radius: 8px;
            background: #f9f9f9;
        }
        .scraper-form {
            display: flex;
            gap: 10px;
            margin: 15px 0;
        }
        #targetResumeUrl {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        #scrapeAndReplaceBtn {
            padding: 10px 20px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #scrapeAndReplaceBtn:hover {
            background: #2980b9;
        }
        #scraperStatus {
            padding: 10px;
            min-height: 20px;
        }
    </style>

    <footer class="footer">
        <p>© 2023 兰皓 - 个人简历 | 最后更新: <span id="last-update"></span></p>
        <div class="social-links">
            <a href="https://gitee.com/hlks" target="_blank"><i class="fab fa-github"></i></a>
            <a href="mailto:2681066350@qq.com"><i class="fas fa-envelope"></i></a>
            <a href="#" class="print-btn"><i class="fas fa-print"></i> 打印简历</a>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>